﻿<!DOCTYPE html>
<html>
<head>
    <title>Click Events</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/twitterApi.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>Click Events</h1>
    <p>
        This button is only useful when using the shift key in combination.
    </p>

    <div class="buttonholder">
        <button data-bind="click: myFunction">
            <img src="../images/metro.icons/white/flag.png" />
        </button>
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>
    <img id="image" src="../images/knockout.jpg" class="hidden" />

    <script type="text/javascript">
        var viewModel = {
            myFunction: function (data, event) {
                if (event.shiftKey) {
                    $("#image").fadeIn("slow");
                } else {
                    $("#image").fadeOut("slow");
                }
            }
        };
        ko.applyBindings(viewModel);
    </script>

</body>
</html>
